<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
</body>

<script id="vertexShader" type="x-shader/x-vertex">
    attribute vec4 a_Position;
    attribute vec4 a_Color;
    uniform mat4 u_PvM4;
    uniform mat4 u_ModelM4;
    uniform float u_PointSize;
    varying vec4 v_Color;
    void main(){
        gl_Position = u_PvM4 * u_ModelM4 * a_Position;
        gl_PointSize = u_PointSize;
        v_Color = a_Color;
    }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
    precision mediump float;
    varying vec4 v_Color;
    void main(){
      gl_FragColor = v_Color;
    }
</script>
<script type="module">
    import { Matrix4, Vector3, Color, PerspectiveCamera, Spherical } from '../js/three.module.js';
    import Poly from '../js/Poly3.js';
    import { initShaders } from '../js/Utils.js';
    import lib from '../js/ThreeLib.js';
    import CameraController from '../js/CameraController.js'


    //#region gl
    const canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight - 4;

    const gl = canvas.getContext("webgl");
    //开始背景遮挡
    gl.enable(gl.DEPTH_TEST);
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

    initShaders(gl,
        document.querySelector("#vertexShader").innerText,
        document.querySelector("#fragmentShader").innerText);
    lib.clearCanvas(gl, new Color("rgba(0,0,0,1)"), 1);
    //#endregion


    const camera = new PerspectiveCamera(45, canvas.width / canvas.height, 1, 20);
    const pvM4 = new Matrix4();
    const polyArr = [];


    //  0-------1
    // /|      /|
    //3-------2 |
    //| |     | |
    //| 4-----|-5
    //|/      |/
    //7-------6 


    const nodes = [
        -1.0, 1.0, -1.0, 1, 0, 0, 1,
        1.0, 1.0, -1.0, 0, 1, 0, 1,
        1.0, 1.0, 1.0, 0, 0, 1, 1,
        -1.0, 1.0, 1.0, 1, 1, 0, 1,
        -1.0, -1.0, -1.0, 1, 0, 1, 1,
        1.0, -1.0, -1.0, 0, 1, 1, 1,
        1.0, -1.0, 1.0, 0, 0, 0, 1,
        -1.0, -1.0, 1.0, 1, 1, 1, 1,
    ];


    // const lines = [
    //     0, 1,
    //     1, 2,
    //     2, 3,
    //     3, 0,

    //     4, 5,
    //     5, 6,
    //     6, 7,
    //     7, 4,

    //     0, 4,
    //     1, 5,
    //     2, 6,
    //     3, 7,
    // ];

    const triangles = [
        0, 1, 2, 0, 2, 3,
        3, 2, 6, 3, 6, 7,
        7, 6, 5, 7, 5, 4,
        4, 5, 1, 4, 1, 0,
        2, 1, 5, 2, 5, 6,
        3, 0, 4, 3, 4, 7
    ];



    const cameraController = new CameraController({
        camera: camera,
        canvas: canvas,
        eye: new Vector3(0, 0, 3),
        lookAt: new Vector3(0, 0, 0),
        pvMatrix: pvM4,
        rendEvent: Rend
    });


    //绑定缓冲对象
    gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
    //写入数据
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(nodes), gl.STATIC_DRAW);


    let a_Position = gl.getAttribLocation(gl.program, 'a_Position');
    gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, 7 * 4, 0 * 4);
    gl.enableVertexAttribArray(a_Position);

    let a_Color = gl.getAttribLocation(gl.program, 'a_Color');
    gl.vertexAttribPointer(a_Color, 4, gl.FLOAT, false, 7 * 4, 3 * 4);
    gl.enableVertexAttribArray(a_Color);


    let u_ModelM4 = gl.getUniformLocation(gl.program, 'u_ModelM4');
    gl.uniformMatrix4fv(u_ModelM4, false, new Matrix4().elements);
    let u_PvM4 = gl.getUniformLocation(gl.program, 'u_PvM4');
    gl.uniformMatrix4fv(u_PvM4, false, pvM4.elements);
    let u_PointSize = gl.getUniformLocation(gl.program, 'u_PointSize');
    gl.uniform1f(u_PointSize, 10);
    let u_Color = gl.getUniformLocation(gl.program, 'u_Color');
    gl.uniform4fv(u_Color, [1, 1, 1, 1]);


    //绑定缓冲线条对象
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.createBuffer());
    //写入线条数据
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint8Array(triangles), gl.STATIC_DRAW);


    Rend();




    function Rend() {
        lib.clearCanvas(gl, new Color("rgba(0,0,0,1)"), 1);
        let u_PvM4 = gl.getUniformLocation(gl.program, 'u_PvM4');
        gl.uniformMatrix4fv(u_PvM4, false, pvM4.elements);
        gl.drawElements(gl.TRIANGLES, triangles.length, gl.UNSIGNED_BYTE, 0);
    }


</script>

</html>